<template>
	<view class="box">
		<view class="top-ipt-nav">
			<!-- <input type="text" class="ipt" placeholder=""> -->
			<u-search borderColor="#E3E3E3" :searchIconSize="60" bgColor="#fff" searchIconColor="#f38b0a"
				:inputStyle="inputStyle" :showAction="false" placeholder="请输入关键字" v-model="keywords"
				@search="getGoodsList(true)"></u-search>
			<view class="navbox">
				<view class="nav-ul-box" v-for="item in GoodsCateList" :key="item.id">
					<view class="li" @click="$navTo(`pages/studys/sort?cat_id=${item.id}&cat_id_2=${item.children[0].id}`)">
						<image :src="item.image" class="img" mode="aspectFit"></image>
						<!-- <u--image :src="item.image" mode="aspectFit"></u--image> -->
						<view class="txt">
							{{item.name}}
						</view>
					</view>
				</view>


			</view>
		</view>
		<view class="bottom-box">
			<view class="head">
				<view class="left">
					推荐
					<view class="chuxian"></view>
				</view>
				<view class="right" @click="goClass">
					<!-- <u--text prefixIcon="grid" size="28rpx" :iconStyle="{fontSize:'35rpx',color:'#fd8a06'}" text="分类"></u--text> -->
					<image src="@/static/img/分类@2x.png" mode=""></image>
					<view class="text1">
						分类
					</view>
				</view>
			</view>
			<view class="xian"></view>
			<view class="product-box">
				<view class="product-li-box" v-for="item in goodslist" :key="item.goods_id">
					<view class="li" @click="godetails(item.goods_id)">
						<image :src="item.original_img" mode="" class="ipt"></image>
						<view class="li-xian"></view>
						<view class="txt twoline-hide">
							{{item.goods_name}}
						</view>
						<view class="bottom-tag">
							<view class="l">
								{{item.sales_sum}}次打印
							</view>
							<view class="r" @click.stop="addPrint(item)">
								<view class="size">
									+
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<Loading :status="loadingStatus" />
		</view>

		<view class="print-tag" @touchstart="onTouchStart" @touchmove="onTouchMove"
			:style="'top:'+ `${translateY}`+'px;'+'left:'+`${translateX}px;`" @click="toUpload">
			<view style="position: relative;">
				<i class="iconfont icon-dayin icon"></i>
				<view v-if="shopCartNum" class="badge">
					<u-badge :show="true" type="error" bgColor="#f32a2e" :value="shopCartNum" :max="99"></u-badge>
				</view>
			</view>

		</view>


	</view>
</template>


<script>
	import {
		PrintApi,
		StudyApi
	} from '@/api';
	import {
		mapGetters
	} from 'vuex'
	import Loading from '@/components/Loading.vue'
	export default {
		components: {
			Loading
		},
		data() {
			return {
				// 搜索框样式
				inputStyle: {
					width: '690rpx',
					height: '70rpx',
					// background:' #ffffff',
				},
				tabbarValue: 1, //底部导航栏选中
				keywords: null, //搜索框
				loadingStatus: 'loadmore', //加载更多
				startX: 0, //
				startY: 0, //
				translateX: 297, //初始位置 
				translateY: 566, //
				goodslist: [], //商品数据
				pageNo: 1,
				GoodsCateList: [], //商品分类
				shopCartNum: 0, // 购物车数量
			}
		},
		computed: {
			...mapGetters(['token'])
		},
		async onLoad() {
			try {
				this.getGoodsList()
				const res = await StudyApi.getGoodsCateList()
				if (res.status === 1) this.GoodsCateList = res.result
			} catch (err) {
				console.log('onLoad错误', err);
			}
		},
		onShow() {
			this.getShopCart()
		},
		onReachBottom() {
			this.getGoodsList()
		},
		methods: {
			toUpload() {
				this.$navTo('pages/indexs/doc/upload')
			},
			// 获取商品数据
			async getGoodsList(init = false) {
				try {
					if (!init && this.loadingStatus === 'nomore')
						return
					if (init) {
						this.goodslist = []
						this.pageNo = 1
					}
					this.loadingStatus = 'loading'
					let form = {
						p: this.pageNo,
						size: 10
					}
					if (this.keywords) form.keywords = this.keywords
					const res = await StudyApi.CateGoods(form)
					if (!res.goodslist.length)
						return this.loadingStatus = 'nomore'
					this.goodslist = this.goodslist.concat(res.goodslist)
					this.pageNo += 1
					this.loadingStatus = 'loadmore'
				} catch (err) {
					console.log('获取商品数据失败', err);
					this.$showToast('获取商品数据失败')
				}
			},
			getShopCart() {
				if (!this.token)
					return
				PrintApi.getCartList()
					.then(res => {
						this.shopCartNum = res.result.length
					})
					.catch(err => {
						console.log('获取购物车失败', err);
						this.$showToast('获取购物车失败')
					})
			},
			// 去详情
			godetails(goods_id) {
				this.$navTo('pages/studys/dataDetails?goods_id=' + goods_id)
			},
			// 去分类
			goClass() {
				this.$navTo('pages/studys/sort2')
			},
			// 手指按下
			onTouchStart(e) {
				this.startX = e.touches[0].clientX;
				this.startY = e.touches[0].clientY;
			},
			// 手指移动
			onTouchMove(e) {
				const offsetX = e.touches[0].clientX - this.startX;
				const offsetY = e.touches[0].clientY - this.startY;
				this.translateX += offsetX;
				this.translateY += offsetY;
				this.startX = e.touches[0].clientX;
				this.startY = e.touches[0].clientY;
			},
			// 添加打印
			addPrint(data) {
				this.$showLoading()
				PrintApi.AjaxJionCart({
						type: 0,
						goods_num: 1,
						goods_id: data.goods_id,
						item_id: data.spec_price_list[0].item_id
					})
					.then(res => {
						uni.hideLoading()
						this.$showToast(res.msg)
						this.getShopCart()
					})
					.catch(err => {
						uni.hideLoading()
						this.$showToast(err)
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uicon-search {
		font-size: 50rpx !important;
	}

	.box {
		width: 750rpx;
		box-sizing: border-box;

		// .tabbar{
		// 	position: fixed;
		// 	bottom: 0;
		// 	width: 100%;
		// 	padding-bottom:$safe-btm-constant;
		// 	background-color: #fff;
		// }
		.print-tag {
			position: fixed;
			// right: 17rpx;
			// bottom: 200rpx;
			width: 87rpx;
			height: 87rpx;
			opacity: 1;
			border: 1rpx solid #d8d8d8;
			background: #fb8b07;
			box-shadow: 0 0 16rpx 0 #00000029;
			border-radius: 50%;
			text-align: center;
			line-height: 87rpx;

			.badge {
				position: absolute;
				right: -2rpx;
				top: -4rpx;
			}

			.icon {
				font-size: 50rpx;
				color: #fff;
			}

		}

		.bottom-box {
			margin-top: 26rpx;
			width: 750rpx;
			min-height: 200rpx;
			padding: 38rpx 30rpx;
			box-sizing: border-box;
			border-radius: 20rpx 20rpx 0 0;
			background: linear-gradient(180deg, #ffebd3 0%, #ffffff 100%);
			position: relative;

			.head {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.right {
					display: flex;
					align-items: center;

					image {
						width: 35rpx;
						height: 35rpx;
					}

					.text1 {
						font-size: 28rpx;
						font-weight: 400;
						font-family: "Source Han Sans";
						margin-left: 7rpx;
					}
				}

				.left {
					color: #000000;
					text-align: center;
					font-size: 30rpx;
					font-weight: 400;
					font-family: "Source Han Sans";
					position: relative;
					width: 60rpx;
					height: 30rpx;
					line-height: 30rpx;

					.chuxian {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: -12rpx;
						width: 42rpx;
						height: 8rpx;
						border-radius: 50rpx;
						opacity: 1;
						border: 1rpx solid #d8d8d8;
						background: #fb8b07;
					}
				}
			}

			.xian {
				// position: absolute;
				// top: 100rpx;
				height: 2rpx;
				margin: 21rpx 0 30rpx 0;
				opacity: 0.5600000023841858;
				// border: 1rpx solid #d8d8d8;
				background: #ffffff;
			}

			.product-box {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				box-sizing: border-box;

				.product-li-box {
					flex: 0 0 50%;
					margin-bottom: 20rpx;

					.li {
						width: 330rpx;
						height: 463rpx;
						border-radius: 15rpx;
						opacity: 1;
						// border: 1rpx solid #d8d8d8;
						background: #ffffff;
						box-shadow: 0 0 20rpx 0 #a8a8a829;
						box-sizing: border-box;
						padding: 10rpx 24rpx;
						position: relative;

						.ipt {
							width: 204rpx;
							height: 245rpx;
							margin-left: 35rpx;
						}

						.li-xian {
							height: 2rpx;
							opacity: 1;
							// border: 1px solid #d8d8d8;
							background: #f2f2f2;
							margin: 25rpx;
						}

						.txt {
							color: #000000;
							text-align: left;
							font-size: 28rpx;
							font-weight: 400;
						}

						.bottom-tag {
							display: flex;
							justify-content: space-between;
							align-items: center;
							height: 47rpx;
							margin-top: 15rpx;

							.l {
								color: #cecece;
								text-align: left;
								font-size: 22rpx;
								font-weight: 400;
							}

							.r {
								width: 47rpx;
								height: 47rpx;
								border-radius: 50%;
								background-color: #fb8b06;
								position: relative;

								.size {
									color: #fff;
									font-size: 34rpx;
									font-weight: 700;
									position: absolute;
									top: 44%;
									left: 52%;
									transform: translate(-50%, -50%);
								}
							}
						}
					}
				}

			}

		}

		.top-ipt-nav {
			width: 750rpx;
			height: 420rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background: radial-gradient(75.3% 116.1% at 19.6% 31.2%, #feeadb 0%, #fef2e7 20%, #fffcf7 52%, #ffffff 100%);

			.ipt {
				width: 690rpx;
				height: 70rpx;
				border-radius: 50rpx;
				opacity: 1;
				border: 1rpx solid #e3e3e3;
				background: #ffffff;
			}

			.navbox {
				display: flex;
				flex-wrap: wrap;

				.nav-ul-box {
					flex: 0 0 25%;
					margin-top: 53rpx;

					.li {
						margin-bottom: 55rpx;
						width: 130rpx;
						height: 118rpx;
						margin: 0 auto;
						box-sizing: border-box;
						text-align: center;

						.img {
							margin: 0 auto;
							width: 50rpx;
							height: 71rpx;
						}

						.txt {
							color: #000000;
							text-align: center;
							font-size: 26rpx;
							font-weight: 400;
							font-family: "Source Han Sans";
							line-height: 26rpx;
						}
					}
				}
			}

		}

	}
</style>